<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    
    <div style="text-align: center;" id="Application">
      <h1>基础</h1>
      <div>点击次数: {{count}}</div>
      <!--
      <button @click="this.count +=1" >点击+1</button>
      -->
      <button @click="click(2), log($event)">点击</button>
      <h1>事件传播</h1>
    <div @click="click1" style="border: solid red;" >
        外层
        <div @click="click2" style="border: solid red;" >
            中层
            <div @click="click3" style="border: solid red;" >
                点击
            </div>
        </div>
    </div>
    <h1>事件捕获 （capture）</h1>
    <div @click.capture="click1" style="border: solid red;" >
        外层
        <div @click.capture="click2" style="border: solid red;" >
            中层
            <div @click.capture="click3" style="border: solid red;" >
                点击
            </div>
        </div>
    </div>

    <h1>事件暂停传递 （stop）</h1>
    <div @click.stop="click1" style="border: solid red;" >
        外层
        <div @click.stop="click2" style="border: solid red;" >
            中层
            <div @click.stop="click3" style="border: solid red;" >
                点击
            </div>
        </div>
    </div>
    <h1>常用事件修饰符</h1>

    <table width="100%">
      <tr>
        <th width="35%" style="text-align: left;">事件修饰符</th>
        <th style="text-align: left;">作用</th>
      </tr>
      <tr v-for="item in event_modifiers">
        <td style="text-align: left;">{{item.name}}</td>
        <td style="text-align: left;">{{item.desc}}</td>
      </tr>
    </table>
    </div>
  </body>

  <script>
    const App= {
      data(){
        return {
          count:0,
          event_modifiers:[{
            name:"stop",
            desc:"阻止事件传递"
          },{
            name:"capture",
            desc:"监听捕获场景的事件"
          },{
            name:"once",
            desc:"只触发一次事件"
          },{
            name:"self",
            desc:"当事件对象的target属性是当前组件时才触发"
          },{
            name:"Prevent",
            desc:"禁止默认事件"
          },{
            name:"passsie",
            desc:"不禁止默认事件"
          }]
        }
      },
      methods: {
        click(step){
          this.count +=step 
        },
        log(event){
          console.log(event)
        },
        click1(){
            console.log("外层") 
        },
        click2(){
            console.log("中层") 
        },
        click3(){
            console.log("内层")
        }


      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>